<template>
    <div>
        <Row style="margin:5px 0px 10px 5px" >
            <i-col span="2" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>
		</Row> 
        <i-table size="default"   border stripe  :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                <Button  size="default"  type="error"  style="margin-bottom: 5px "  @click="del_statefulset(index)">删除</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
    </div>
</template>

<script>

import {k8s_namespace_post} from '@/api/http'
import { delete_statefulset,get_statefulset_list} from  '@/api'
import { delete_namespace_resource,get_placement } from '@/common/util.js'
import store from '@/store'

export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                // {
                //     title: '名字',key: 'name'
                // },
                {
                    title: '名字',key: 'name',
                    render: (h,params) => {
                        return h('div',[
                            h('a',{
                                style: {
                                    color: 'blue'
                                },
                                on: {
                                    click: ()=>{                       
                                        this.handleLink(params);
                                    }
                                }
                            },params.row.name)
                        ])
                    }
                },    
                {
                    title: '副本数',key: 'replicas'
                },
                {
                    title: '服务名',key: 'service_name'
                },
                {
                    title: '标签',key: 'labels',width:350,
                    render: (h, params) => {
                        let labels = params.row.labels
                        if(labels == null){
                            return h('p','无')
                        }else {
                            let length = Object.keys(labels).length
                            let value = JSON.stringify(labels,undefined,4)
                            if(length>0 && length < 3){
                                return h('pre', value)
                            }else{
                                let placement = get_placement(params)
                                return h('Poptip', {props:{'trigger':'hover','word-wrap':true,'placement':placement,content:value}},[
                                        h('a', '显示')
                                ]);
                            }

                        }

                    }
                },


                {
                    title: '容忍',key: 'tolerations',                    
                    render : (h,params) => {
                        let tolerations = params.row.tolerations 
                        if (tolerations == null ){
                            return   h('p','无')
                        }else{
                            let value = JSON.stringify(tolerations,undefined,4)
                            let placement = get_placement(params)
                            return h('Poptip', {props:{'trigger':'hover','word-wrap':true,'placement':placement,content:value}},[
                                    h('a', '显示')
                            ]);
                        }
                    }

                },
                // {
                //     title: '容器列表',key: 'container_list',width: 600,
                //     render : (h,params) => {
                //         let tolerations = params.row.tolerations 
                //         if (tolerations == null ){
                //             return   h('p','无')
                //         }else{
                //             let value = JSON.stringify(tolerations,undefined,4)
                //             return h('Poptip', {props:{'trigger':'hover','word-wrap':true,'placement':'right-start',content:value}},[
                //                     h('a', '显示')
                //             ]);
                //         }
                //     }
                // },
                {
                    title: 'PVC',key: 'pvc_list',
                    render : (h,params) => {
                        let pvc_list = params.row.pvc_list 
                        if (pvc_list.length == 0 || pvc_list == null ){
                            return   h('p','无')
                        }else{
                            let value = JSON.stringify(pvc_list,undefined,4)
                            let placement = get_placement(params)
                            return h('Poptip', {props:{'trigger':'hover','word-wrap':true,'placement':placement,content:value}},[
                                    h('a', '显示')
                            ]);

                        }
                    }
                },
                {
                    title: '主机网络',key: 'host_network'
                },
                {
                    title: '创建时间',key: 'create_time'
                },
                {
                    title: '操作',slot: 'action',width: 100,align: 'center'
                }
            ],
            total_list: [],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 10,
        }
    },
    methods: {
        btn_refresh(){
            this.refresh()
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        // 链接点击事件，进入详情页
        handleLink(params){
            let cluster = localStorage.getItem('currentCluster')
            let namespace = params.row.namespace
            this.$router.push({name: 'statefulSetDetail',query: {name: params.row.name,cluster_name: cluster,namespace: namespace}})
        },
        del_statefulset(index){
            let name = this.show_list[index].name
            let result = confirm("确定要删除"+name+"吗?")
            if(result == false) return 
            let namespace = this.show_list[index].namespace
            delete_namespace_resource(namespace,name,delete_statefulset)
            this.refresh()
        },
        refresh() {
            k8s_namespace_post(get_statefulset_list).then( (response) => {
                this.total_list = response.data
                this.total = response.data.length
                if(this.total < this.pageSize) {
                    this.show_list = this.total_list
                }else {
                    let currentPage = this.$refs.page.currentPage
                    let _start = (currentPage-1) * this.pageSize
                    let _end = currentPage * this.pageSize
                    this.show_list = this.total_list.slice(_start,_end)
                }
            })
        }
    },
    mounted() {
        this.refresh()
    },
}
</script>
<style>
    pre{
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }

</style>